<template>
  <div>
    <div class="llj-list">
      <div class="empty" v-if="list.length === 0">
        <img src="/src/assets/llj/404.png" class="img-404">
        <span class="text-1">哎呀~您还没有兑换过商品呢~</span>
        <span class="text-2">快点击下方按钮兑换吧~</span>
        <img src="/src/assets/llj/404-btn.png" class="btn-404" @click="showPopup">
      </div>
      <div class="full" v-if="list.length > 0">
        <div class="scroll">
          <div class="item" v-for="(v, k) in list" :key="k">
            <div class="header">
              <span>快递单号：{{v.express_no}}</span>
              <img src="/src/assets/llj/help.png" @click="toExplain(v.type)">
              <span>机器类型：{{posType[v.type]}} ({{v.number}}台)</span>
            </div>
            <div class="body">
              <span>姓名：{{v.name}}</span>
              <span>手机号：{{v.mobile}}</span>
              <span class="light">地址：{{v.address}}</span>
            </div>
            <div class="footer">
              <span>状态：{{v.status}} <span v-if="Number(v.if_paid) !== 2">({{v.send_time}})</span></span>
              <div class="btn-group">
                <mt-button class="blue"
                  v-if="Number(v.if_paid) === 2"
                  @click.native="toPay(v.id, v.type)"
                >付款</mt-button>
                <mt-button class="gray"
                  v-if="Number(v.if_paid) === 2"
                  @click.native="cancelPay(v.id)"
                >放弃</mt-button>
                <mt-button class="blue"
                  v-if="Number(v.if_paid) === 1 && Number(v.if_deliver) === 1 && v.finish_time === ''"
                  @click.native="confirmLlj(v.id)"
                >确认收货</mt-button>
                <span v-if="v.finish_time !== ''">已收货</span>
              </div>
            </div>
          </div>
        </div>
        <div class="footer-button">
          <mt-button class="blue" @click.native="showPopup">申请POS</mt-button>
        </div>
      </div>
      <mt-popup v-model="popupVisible" position="bottom">
        <div class="title">
          <span class="close" @click="closePopup">+</span>
          选择申请
        </div>
        <div class="choose">
          <div class="item"
            v-for="(v, k) in posType" :key="k"
            @click="$router.push({name: 'LljAdd', params: {type: k}})"
          >
            <span>{{v}}</span>
            <span></span>
          </div>
        </div>
      </mt-popup>
    </div>
  </div>
</template>

<script>
  import {MessageBox, Toast} from 'Mint-ui'

  export default {
    name: 'LljList',
    data () {
      return {
        list: [],
        popupVisible: false,
        posType: {}
      }
    },
    methods: {
      getList () {
        this.$post('/vue/llj/express').then(data => {
          this.list = data.list
          this.posType = data.type
        })
      },
      showPopup () {
        this.popupVisible = true
      },
      closePopup () {
        this.popupVisible = false
      },
      toExplain (type) {
        this.$router.push({name: 'LljExplain', params: {type: type}})
      },
      toPay (id, type) {
        this.$router.push({name: 'LljPay', params: {type: type, id: id}})
      },
      cancelPay (id) {
        MessageBox.confirm('确认放弃申请么？', '温馨提示').then(act => {
          if (act === 'confirm') {
            let params = {id: id}
            this.$post('/vue/llj/cancel_apply', params).then(data => {
              msg(data)
              this.getList()
            })
          }
        })
      },
      confirmLlj (id) {
        MessageBox.confirm('确认收到货品么？', '温馨提示', {
          confirmButtonText: '已收到',
          cancelButtonText: '还木有'
        }).then(act => {
          if (act === 'confirm') {
            let params = {id: id}
            this.$post('/vue/llj/update_finish', params).then(data => {
              msg(data)
              this.getList()
            })
          }
        })
      }
    },
    mounted () {
      this.getList()
    }
  }
  const msg = m => {
    Toast({
      message: m,
      position: 'bottom',
      duration: 2000
    })
  }
</script>

<style lang="less">
  @c-53: rgb(53, 53, 53);
  @c-102: rgb(102, 102, 102);
  @c-135: rgb(135, 135, 135);
  @c-175: rgb(175, 175, 175);
  @c-216: rgb(216, 216, 216);
  @c-240: rgb(240, 240, 240);
  @c-blue: rgb(114, 188, 224);

  .llj-list {
    background-color: #FFF;
    min-height: 100vh;
    .empty {
      width: 50%;
      height: 70vh;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      align-content: center;
      justify-content: center;
      img {
        flex: 0 0 auto;
      }
      .img-404 {
        width: 30.67vw;
        height: auto;
      }
      .btn-404 {
        margin-top: 50px;
        width: 36vw;
        height: auto;
      }
      .text-1 {
        margin-top: 24px;
        font-size: 14px;
        line-height: 20px;
        color: @c-102;
      }
      .text-2 {
        margin-top: 12px;
        font-size: 12px;
        line-height: 17px;
        color: @c-135;
      }
    }
    .full {
      background-color: rgb(249, 250, 254);
      padding: 15px 15px 55px;
      .item {
        background-color: #FFF;
        border-radius: 5px;
        box-shadow: 0 1px 3px 1px rgba(20, 72, 97, 0.15);
        margin-bottom: 20px;
        &:last-child {
          margin-bottom: 0;
        }
        .header {
          padding: 12px;
          border-bottom: 1px solid @c-240;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          span {
            width: 90%;
            flex:  0 0 auto;
            text-align: left;
            font-size: 13px;
            font-weight: bold;
            line-height: 24px;
            letter-spacing: 1px;
            color: @c-53;
          }
          img {
            width: 30px;
            height: 30px;
          }
        }
        .body {
          padding: 12px;
          display: flex;
          flex-wrap: wrap;
          span {
            width: 100%;
            flex: 0 0 auto;
            text-align: left;
            font-size: 13px;
            line-height: 24px;
            letter-spacing: 1px;
            color: @c-53;
            &.light {
              color: @c-135;
            }
          }
        }
        .footer {
          padding: 12px;
          border-top: 1px solid @c-240;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          span {
            text-align: left;
            font-size: 13px;
            font-weight: bold;
            line-height: 24px;
            letter-spacing: 1px;
            color: @c-53;
          }
          .btn-group {
            .mint-button {
              padding: 3px 12px;
              height: auto;
              font-size: 13px;
              line-height: 18px;
              color: #FFF;
              &.blue {
                background-color: @c-blue;
              }
              &.gray {
                background-color: @c-216;
                color: @c-175;
              }
            }
          }
        }
      }
    }
    .mint-popup {
      width: 100vw;
      .title {
        padding: 0 15px;
        height: 40px;
        font-size: 16px;
        font-weight: bold;
        line-height: 40px;
        color: @c-53;
        .close {
          float: left;
          display: block;
          font-size: 26px;
          transform: rotate(45deg);
          font-weight: 100;
        }
      }
      .choose {
        height: 153px;
        overflow-x: hidden;
        overflow-y: scroll;
        .item {
          border-top: 1px solid @c-240;
          display: flex;
          padding: 15px;
          position: relative;
          span {
            font-size: 14px;
            line-height: 20px;
            color: @c-53;
          }
          &::after {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            background-color: rgb(0, 0, 0);
            opacity: 0;
          }
          &:active::after {
            opacity: 0.2;
          }
        }
      }
    }
    .footer-button {
      position: fixed;
      z-index: 1;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      .mint-button {
        width: 100%;
        height: 40px;
        color: #FFF;
        background-color: @c-blue;
        border-radius: 0;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 1px;
      }
    }
  }
</style>